<!--chore:  表明对配置、第三方包上做了改动，， fix：     feat：-->
<script setup lang = "ts">


import ChildBoth from "@/Components/ChildBoth.vue";
import SongBottom from "@/Components/SongBottom.vue";

import BackGoSearch from "@/Components/BackGoSearch.vue";
import Recommend from "@/Components/Recommend.vue";
import SongList from "@/Components/SongList.vue";
import UserPhoto from "@/Components/UserPhoto.vue";
import LeftAll from "@/Components/LeftAll.vue";
import RecommendPage from "@/Components/RecommendPage.vue";
import {ref} from "vue";
import Logo from "@/Components/Logo.vue";
import MyLovePage from "@/Components/MyLovePage.vue";

let tab = ref(0)






</script>




<template>

  <child-both></child-both>
  <song-bottom></song-bottom>
  <div class="body flex justify-between gap-3">
<!--    <left-all ></left-all>-->
    <div class=" left-list   z-8 w-50 h-full lg:w-60 xl:w-70   bg-[#dae6e6]  pb-50">
      <Logo></Logo>


      <div class="online-music flex flex-col gap-2 justify-start mt-6 ml-10 mr-8">
        <img src="./img/t-在线音乐.png" class=" h-5 w-34">
        <div class="hover:bg-[#bfd6d2] rounded-2xl flex gap-3 justify-start items-center "
             @click="tab=0" :class="{tab_active:tab==0}"
        >
          <img src="./img/推荐.png" class="h-12">
          <img src="./img/t-推荐.png" class="h-5.5">
        </div>
        <div class="hover:bg-[#bfd6d2] rounded-2xl flex gap-3 justify-start items-center  ml--2 ">
          <img src="./img/音乐馆.png" class="h-12">
          <img src="./img/t-音乐馆.png" class="h-5.5">
        </div>
      </div>

      <div class="my-music flex flex-col gap-2 justify-start mt-6 ml-10 mr-8">
        <img src="./img/t-我的音乐.png" class=" h-5 w-34">
        <div class="hover:bg-[#bfd6d2] rounded-2xl flex gap-3 justify-start items-center"
             @click="tab=2" :class="{tab_active:tab==2}"
        >
          <img src="./img/我喜欢.png" class="h-12">
          <img src="./img/t-我喜欢.png" class="h-5.5">
        </div>
        <div class="hover:bg-[#bfd6d2] rounded-2xl flex gap-3 justify-start items-center">
          <img src="./img/最近播放.png" class="h-12">
          <img src="./img/t-最近播放.png" class="h-5.5">
        </div>
      </div>

      <div class="music-play flex flex-col gap-2 justify-start mt-6 ml-10 mr-8">
        <img src="./img/t-音乐乐园.png" class=" h-5 w-34">
        <div class="hover:bg-[#bfd6d2] rounded-2xl flex gap-3 justify-start items-center">
          <img src="./img/游戏.png" class="h-12">
          <img src="./img/t-游戏.png" class="h-5.5">
        </div>
        <div class="hover:bg-[#bfd6d2] rounded-2xl flex gap-3 justify-start items-center">
          <img src="./img/音乐探索.png" class="h-12 w-13">
          <img src="./img/t-音乐探索.png" class="h-5.5">
        </div>
        <div class="hover:bg-[#bfd6d2] rounded-2xl flex gap-3 justify-start items-center">
          <img src="./img/音乐成就.png" class="h-12">
          <img src="./img/t-音乐成就.png" class="h-5.5">
        </div>
      </div>
    </div>


    <template v-if="tab==0">
      <recommend-page></recommend-page>
    </template>
    <template v-if="tab==2">
      <my-love-page></my-love-page>
    </template>


    <user-photo></user-photo>
  </div>

</template>


<style scoped>
.main::-webkit-scrollbar {
  display: none;
}
</style>